import React from 'react';
import { BenchMarkC, PrimaryC, FirstHeaderC, SecondHeaderC, DATA_ENTRY, AdvancedSearch, codeType } from '../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';

class BenchMarkDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      init2: '60c87647f1742367f817131f',
      init3: undefined,
      init4: ['60c87647f1742367f817131f', '60c30b93444df769922c5897'],
    };

    setTimeout(() => {
      this.setState({
        init3: '60c30b93444df769922c5897',
      });
    }, 3000);
  }

  onClick2 = () => {
    this.state.BenchMarkC2.setSelect('60c328f6444df769922c5899');
  };
  onClick3 = () => {
    this.state.BenchMarkC3.setSelect('60d18cd6d0372f5928506043');
  };
  onClick4 = () => {
    this.state.BenchMarkC4.setSelect(['60c328f6444df769922c5899', '60d18cd6d0372f5928506043']);
  };

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <FirstHeaderC title='基本用法' />
        <div style={{ width: '500px' }}>
          <SecondHeaderC title='无初始化值' />
          <BenchMarkC form={this.props.form} dataIndex='bench1' onChange={(e) => console.log(e)} />
          <SecondHeaderC title='有初始化值-同步' />
          <BenchMarkC
            form={this.props.form}
            dataIndex='bench2'
            initialValue={this.state.init2}
            onRef={(ref) => this.setState({ BenchMarkC2: ref })}
            onChange={(e) => console.log(e)}
          />
          <PrimaryC onClick={this.onClick2} title='修改' />
          <SecondHeaderC title='有初始化值-异步' />
          <BenchMarkC
            form={this.props.form}
            dataIndex='bench3'
            initialValue={this.state.init3}
            onChange={(e) => console.log(e)}
            onRef={(ref) => this.setState({ BenchMarkC3: ref })}
          />
          <PrimaryC onClick={this.onClick3} title='修改' />
          <SecondHeaderC title='多选模式初始化' />
          <BenchMarkC
            form={this.props.form}
            dataIndex='bench4'
            multiple={true}
            initialValue={this.state.init4}
            onChange={(e) => console.log(e)}
            onRef={(ref) => this.setState({ BenchMarkC4: ref })}
          />
          <PrimaryC onClick={this.onClick4} title='修改' />
          <SecondHeaderC title='设置校验规则' />
          <BenchMarkC form={this.props.form} dataIndex='bench5' rules={[{ required: true, message: '请选择基准!' }]} onChange={(e) => console.log(e)} />
          <SecondHeaderC title='设置帮助信息' />
          <BenchMarkC form={this.props.form} dataIndex='bench6' helper='lalal' onChange={(e) => console.log(e)} />
          <SecondHeaderC title='禁用' />
          <BenchMarkC form={this.props.form} dataIndex='bench7' disabled={true} onChange={(e) => console.log(e)} />
        </div>
        <FirstHeaderC title='在查询条件中引用' />
        <AdvancedSearch
          dataSource={[
            {
              dataIndex: 'bench8',
              type: DATA_ENTRY.BENCHMARK,
            },
          ]}
          onQuery={(e) => console.log(e)}
        />
      </div>
    );
  }
}

export default Form.create()(BenchMarkDemo);
